<template>
	<view class="strategy-content">
		<scroll-view scroll-y style="height: 100vh" refresher-enabled :refresher-triggered="refreshing"
			@refresherrefresh="onRefresh" @scrolltolower="loadMore">
			<uni-card v-for="(item, index) in strategyList" :key="index" :is-shadow="false">
				<view class="item">
					<text class="label">计划名称：</text>
					<text class="value">{{ item.name }}</text>
				</view>
				<view class="item">
					<text class="label">使用策略：</text>
					<text class="value">{{ item.policy }}</text>
				</view>
				<view class="item">
					<text class="label">启动时间：</text>
					<text class="value">{{ item.start }}</text>
				</view>
				<view class="item">
					<text class="label">结束时间：</text>
					<text class="value">{{ item.end }}</text>
				</view>

				<!-- 状态 + 是否暂停计划同一行 -->
				<view class="row status-row">
					<view class="left">
						<text class="label">计划状态：</text>
						<text class="status-text" :class="{
                running: item.status === 1,
                finished: item.status === 2,
                paused: item.status === 3
              }">
							{{ statusText(item.status) }}
						</text>
					</view>
					<view class="right" v-if="item.status !== 2">
						<text class="label inline">是否暂停计划：</text>
						<switch :checked="item.status === 1" @change="togglePause(index, $event)" />
					</view>
				</view>
			</uni-card>

			<!-- 底部提示 -->
			<view class="load-tip">
				<text v-if="loadingMore">正在加载更多...</text>
				<text v-else-if="noMore">没有更多数据</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'

	const refreshing = ref(false)
	const loadingMore = ref(false)
	const noMore = ref(false)
	const strategyList = ref([])
	let page = 1
	const pageSize = 3
	const maxPage = 3 // 模拟最多3页

	// 状态码转文字
	function statusText(code) {
		if (code === 1) return '执行中'
		if (code === 2) return '已执行'
		if (code === 3) return '暂停中'
		return ''
	}

	// 模拟接口：返回分页数据
	function fetchStrategies(pageNo, size) {
		return new Promise(resolve => {
			setTimeout(() => {
				if (pageNo > maxPage) {
					resolve([])
					return
				}
				const data = []
				for (let i = 0; i < size; i++) {
					const idx = (pageNo - 1) * size + i + 1
					data.push({
						name: `20251117策略-${idx}号`,
						policy: `20251117策略-${idx}`,
						start: `2025-11-17 12:0${idx}:00`,
						end: `2025-12-31 12:0${idx}:00`,
						status: [1, 2, 3][idx % 3] // 随机状态
					})
				}
				resolve(data)
			}, 800)
		})
	}

	// 初始加载
	fetchStrategies(page, pageSize).then(data => {
		strategyList.value = data
	})

	// 下拉刷新
	function onRefresh() {
		refreshing.value = true
		page = 1
		noMore.value = false
		fetchStrategies(page, pageSize).then(data => {
			strategyList.value = data
			refreshing.value = false
			uni.showToast({
				title: '策略已刷新',
				icon: 'none'
			})
		})
	}

	// 上拉加载更多
	function loadMore() {
		if (loadingMore.value || noMore.value) return
		loadingMore.value = true
		page++
		fetchStrategies(page, pageSize).then(data => {
			if (data.length > 0) {
				strategyList.value = strategyList.value.concat(data)
				uni.showToast({
					title: `加载第${page}页数据`,
					icon: 'none'
				})
			} else {
				noMore.value = true
			}
			loadingMore.value = false
		})
	}

	// 切换暂停/执行
	function togglePause(index, e) {
		if (e.detail.value) {
			strategyList.value[index].status = 1
			uni.showToast({
				title: '计划已开启执行',
				icon: 'none'
			})
		} else {
			strategyList.value[index].status = 3
			uni.showToast({
				title: '计划已暂停',
				icon: 'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.strategy-content {
		// padding: 20rpx;
	}

	.item {
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		.label {
			font-weight: bold;
			margin-right: 8rpx;
			color: #333;
		}

		.value {
			flex: 1;
			color: #555;
		}
	}

	/* 一行左右布局 */
	.row.status-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 8rpx 0;
	}

	.row .left {
		display: flex;
		align-items: center;
	}

	.row .right {
		display: flex;
		align-items: center;
	}

	.label.inline {
		margin-right: 12rpx;
	}

	/* 状态颜色 */
	.status-text.running {
		color: #5cb85c;
		/* 绿色 */
	}

	.status-text.finished {
		color: #007aff;
		/* 蓝色 */
	}

	.status-text.paused {
		color: #f0ad4e;
		/* 黄色 */
	}

	.load-tip {
		text-align: center;
		padding: 20rpx;
		color: #888;
	}
</style>